<template>
  <div>Hello world</div>
  <p v-text="name"></p>
  <p>{{name}}</p>
  <p>{{info}}</p>
  <p v-html="info"></p>
  <p v-bind:datatype="dataVal">我有属性data</p>
  <p :class="{'red':!isRed}">我是红色的</p>
  <ul>
    <li v-for="(item,index ) in userList" :key="index">
      第{{index+1}}位学生姓名：{{item.username}}，年龄：{{item.age}}，姓别：{{item.sex}}
    </li>
  </ul>
</template>

<script>
import {reactive,toRefs} from "vue"
export default {
  name:"home",
  setup(){
    //beforeCreate他create两个生命周期
    const data = reactive({
      name:"小红",
      age:20,
      info:"<i>我是斜体字</i>",
      dataVal:20,
      isRed:false,
      userList:[
        {
          username:"学生1",
          age:20,
          sex:0
        },
        {
          username:"学生2",
          age:20,
          sex:0
        },
        {
          username:"学生3",
          age:20,
          sex:1
        }
      ]
    })
        return {
      ...toRefs(data)
    }
  }
}
</script>
<style>
.red{
  color: red;
}
</style>
